<template>
  <div class="hot-con">
    <div class="hot-can" ref="hotBox"></div>
    <span :style="comStyle" class="iconfont left-arrow" @click="tabPie(-1)">&#xe6ef;</span>
    <span :style="comStyle" class="iconfont right-arrow" @click="tabPie(1)">&#xe6ed;</span>
    <span :style="comStyle" class="hot-title">{{title}}</span>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, onUnmounted, computed, useContext, watch } from 'vue'
import axios from '../api'
import { useStore } from 'vuex'
import { getThemeValue } from '../utils/theme_utils'
import WebSocketSerivce from '../utils/socket_service'
declare const echarts
export default defineComponent({
    name: 'Hot',
    setup() {
      const store = useStore()
      let hotChart
      const data = ref([])
      const titleFontSize = ref<number>(0)
      const currentIndex = ref<number>(0)
      const hotBox = ref<HTMLElement>(null)
  

      const comStyle = computed(() => {
        return {
          fontSize: titleFontSize.value + 'px',
          color: getThemeValue(store.state.theme).titleColor
        }
      })
      const title = computed(() => {
        return data.value.length ? data.value[currentIndex.value].name : ''
      })
      watch(() => store.state.theme, theme => {
        hotChart.dispose()  // 销毁原来的图表
        initChart()
        screenAdapter()
        updateChart()
      })
      // 初始化图表
      const initChart = () => {
        hotChart = echarts.init(hotBox.value, store.state.theme)
        const initOption = {
          title: {
            text: '▎ 销量统计',
            left: 20,
            top: 20
          },
          legend: {
            top: '15%',
            icon: 'circle'
          },
          series: {
            type: 'pie',
            label: {
              show: false

            },
            emphasis: {
              label: {
                show: true
              },
              labelLine: {
                show: false
              }
            }
          },
          tooltip: {
            show: true,
            formatter: arg => {
              // console.log(arg)
              const thirdCategory = arg.data.children
              // 计算出所有三级分类的数值总和
              let total = 0
              thirdCategory.forEach(item => {
                total += item.value
              })
              let retStr = ''
              thirdCategory.forEach(item => {
                retStr += `
                ${item.name}:${Math.round(item.value  / total * 100) + '%'}
                <br/>
                `
              })
              return retStr
            }
          },
        }
        hotChart.setOption(initOption)
      }
      // 获取数据
      const getData = async res => {
        // const { data : res } =  await axios.get('hotproduct')
        data.value = res
        updateChart()
      }
      // 更新图表
      const updateChart = () => {
        const legendData = data.value[currentIndex.value].children.map(item => item.name)
        const seriesData = data.value[currentIndex.value].children
        const updateChart = {
          legend: {
            data: legendData
          },
          series: {
            data: seriesData
          }
        }
        hotChart.setOption(updateChart)
       
      }
      // 适配
      const screenAdapter = () => {
        titleFontSize.value = hotBox.value.offsetWidth / 100 * 3.6
        const adapterOption = {
          title: {
            textStyle: {
              fontSize: titleFontSize.value
            }
          },
          
          legend: {
            itemWidth: titleFontSize.value,
            itemHeight: titleFontSize.value,
            itemGap: titleFontSize.value / 2,
            textStyle: {
              fontSize: titleFontSize.value / 2
            }
          },
          series: [
            {
              radius: titleFontSize.value * 5,
              center: ['50%', '53%'],
              label: {
                fontSize: titleFontSize.value / 2
              }
            }
          ]
        }
        hotChart.setOption(adapterOption)
        hotChart.resize()
      }
      // 切换饼图
      const tabPie = num => {
        currentIndex.value += num
        if(currentIndex.value > 2) {
          currentIndex.value = 0
        }
        if(currentIndex.value < 0) {
          currentIndex.value = 2
        }
        updateChart()
      }

      const { expose } = useContext()
      expose({
        screenAdapter
      })

      onMounted(async () => {
        WebSocketSerivce.instance.registerCallBack('hotData', getData)
        initChart()
        // await getData()
        WebSocketSerivce.instance.send({
          action: 'getData',
          socketType: 'hotData',
          chartName: 'hotProduct',
          value: false
        })
        window.addEventListener('resize', screenAdapter)
        screenAdapter()
      })

      onUnmounted(() => {
        WebSocketSerivce.instance.unRegisterCallBack('hotData')
        window.removeEventListener('resize', screenAdapter)
      })

      return {
        hotBox,
        tabPie,
        comStyle,
        title
      }
    }
})
</script>
<style lang="less" scoped>
.hot-con {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  .hot-can {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .left-arrow,.right-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: white;
  }
  .left-arrow {
    left: 20%;
  }
  .right-arrow {
    right: 20%;
  }
  .hot-title {
    position: absolute;
    right: 15%;
    bottom: 15%;
    color: white;
  }
}
</style>
